<template>
    <div class="chart-wrap">
      <div class="chart-col">
        <div>
          查询时间段：<el-date-picker
            v-model="date1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="(value) => dateChange(value,'1')"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOption"
            
            >
          </el-date-picker>
        </div>
        <BarChart id="chart1" :unit="'(单位/位)'" :color="['#73c0de']" :title="'各流程环节下客户'" :chartData="chart1" style="margin-top:30px;"  height="70%" width="100%" />
        <!-- <div class="chart-radio">
          <el-radio-group @change="(label) => radioChange(label,'1')" v-model="radio1" style="float:left;
          margin-bottom: 30px;">
            <el-radio-button label="全部">全部</el-radio-button>
          </el-radio-group>
          <el-checkbox-group v-model="checkboxGroup1" @change="(label) => checkedChange(label,'1')" style="float:left;
          margin-bottom: 30px;">
            <el-checkbox-button v-for="item in chooseList" :label="item.name" :key="item.id">{{item.name}}</el-checkbox-button>
          </el-checkbox-group>
        </div> -->
      </div>
      <div class="chart-col">
        <div>
          查询时间段：<el-date-picker
            v-model="date2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="(value) => dateChange(value,'2')"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOption"
            >
          </el-date-picker>
        </div>
        <PieChart id="chart2"  :chartData="chart2" :title="'各流程环节客户数'"  style="margin-top:30px;" height="70%" width="100%" />
        <!-- <div class="chart-radio">
         <el-radio-group @change="(label) => radioChange(label,'2')" v-model="radio2" style="float:left;
          margin-bottom: 30px;">
            <el-radio-button label="全部">全部</el-radio-button>
          </el-radio-group>
          <el-checkbox-group v-model="checkboxGroup2" @change="(label) => checkedChange(label,'2')" style="float:left;
          margin-bottom: 30px;">
            <el-checkbox-button v-for="item in chooseList" :label="item.name" :key="item.id">{{item.name}}</el-checkbox-button>
          </el-checkbox-group>
        </div> -->
      </div>
      <div class="chart-col">
        <div>
         查询时间段： <el-date-picker
            v-model="date3"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="(value) => dateChange(value,'3')"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOption">
          </el-date-picker>
        </div>
        <BarChart id="chart3"  :unit="'(单位/个)'" :chartData="chart3" :title="'审批环节项目数量'"  style="margin-top:30px;" height="70%" width="100%" />
        <!-- <div class="chart-radio">
         <el-radio-group @change="(label) => radioChange(label,'3')" v-model="radio3" style="float:left;
          margin-bottom: 30px;">
            <el-radio-button label="全部">全部</el-radio-button>
          </el-radio-group>
          <el-checkbox-group v-model="checkboxGroup3" @change="(label) => checkedChange(label,'3')" style="float:left;
          margin-bottom: 30px;">
            <el-checkbox-button v-for="item in chooseList" :label="item.name" :key="item.id">{{item.name}}</el-checkbox-button>
          </el-checkbox-group>
        </div> -->
      </div>
    </div>
</template>

<script>
import {quertChoose,queryChartData} from "@/api/dashboard";
import { mapGetters } from 'vuex';
import BarChart from '@/components/Charts/barChart'
import PieChart from '@/components/Charts/pieChart'
import {getCurrentMonthFirst,getCurrentDate} from '@/utils/index'
export default {
  name: 'DashboardChart',
  components: { BarChart,PieChart},
  data() {
    return {
      chooseList:[],
      checkboxGroup1: [],
      checkboxGroup2: [],
      checkboxGroup3: [],
      date1: ["2021-08-25","2021-08-25"],
      date2:  ["2021-08-25","2021-08-25"],
      date3:  ["2021-08-25","2021-08-25"],
      radio1: "全部",
      radio2: "全部",
      radio3: "全部",
      chart1:{},
      chart2:{},
      chart3:{},
      pickerOption: {
        disabledDate(current) {
          return current && current.getTime() > new Date().getTime();
        }
      }
    }
  },
  created() {
    this.getChoose();
    this.init();
    this.getChartData(1);
    this.getChartData(2);
    this.getChartData(3);
  },
  methods: {
    init() {
      let startDate = getCurrentMonthFirst()
      let endDate = getCurrentDate()
      this.date1 = this.date2 = this.date3 = [startDate,endDate]
    },  
    getChoose() {
      quertChoose()
        .then(res => {
          this.chooseList = res.data
        })
    },
    getChartData(type) {
      let datas
      if(type == 1) {
        datas = {
          "capitalNameList": this.checkboxGroup1,
          "endDate": this.date1[1],
          "selectType": type,
          "startDate": this.date1[0]
        }
      }else  if(type == 2) {
        datas = {
          "capitalNameList": this.checkboxGroup2,
          "endDate": this.date2[1],
          "selectType": type,
          "startDate": this.date2[0]
        }
      }else{
        datas = {
          "capitalNameList": this.checkboxGroup3,
          "endDate": this.date3[1],
          "selectType": type,
          "startDate": this.date3[0]
        }
      }
      queryChartData(datas)
        .then(res  => {
          type == 1?this.chart1=res.data:type==2?this.chart2=res.data:this.chart3=res.data;
        })
    },
    checkedChange(e,type) {
      switch(type){
        case "1":
          if(e.length > 0) {
            this.radio1 = ""
          }else{
            this.radio1 = "全部"
            this.checkboxGroup1=["全部"]
          }
          break;
        case "2":
          if(e.length > 0) {
            this.radio2 = ""
          }else{
            this.radio2 = "全部"
            this.checkboxGroup2=["全部"]
          }
          break;
        case "3":
          if(e.length > 0) {
            this.radio3 = ""
          }else{
            this.radio3 = "全部"
            this.checkboxGroup3=["全部"]
          }
          break;
      }
      this.getChartData(type)
    },
    radioChange(e,type) {
       switch(type){
        case "1":
          this.checkboxGroup1 = [];
          break;
        case "2":
          this.checkboxGroup2 = [];
          break;
        case "3":
          this.checkboxGroup3 = [];
          break;
      }
      this.getChartData(type)
    },
    dateChange(value,type) { 
      switch(type){
        case "1":
          this.date1 = value;
          break;
        case "2":
          this.date2 = value;
          break;
        case "3":
          this.date3 = value;
          break;
      }
      this.getChartData(type)
    },
    
    disabledDate(current) {
      return current && current < new Date().getDate();
    }
  }
};
</script>
<style lang="scss">
  .chart-wrap{
    .el-popover, .el-radio-button:first-child:last-child .el-radio-button__inner{
      border-radius: 4px 0 0 4px;
    }
  }
</style>
<style lang="scss" scoped>
.dashboard {
  &-container{
    
    .chart-wrap{
      overflow: hidden;
      margin-top: 30px;
      padding-left: 20px;
      .chart-col{
        float: left;
        width: 50%;
        padding-right:20px;
        height:600px;
        .chart-radio{
          padding: 10px 0;
          text-align: center;
          background: #fff;
          overflow: hidden;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
</style>
